<template>
  <div class="ver-layout">
    <div v-if="!props.dialogModel" class="hor-layout" style="margin-bottom: 10px">
      <el-button type="primary" size="small" @click="emit('backClick')">< 返回</el-button>
    </div>
    <div class="hor-layout-center-all day-check-title-view">{{ pageTitle }}</div>
    <el-date-picker-panel :model-value="dateValue" :disabled="true" border style="width: 100%;margin-top: 10px">
      <template #default="scope">
        <div class="ver-layout day-item-view"
             :style="getDayStyle(scope)">
          <div>{{ scope.text }}</div>
          <div>{{ getDayText(scope) }}</div>
        </div>
      </template>
    </el-date-picker-panel>
  </div>
</template>

<script setup lang="ts">

import {computed, reactive, watch} from "vue";
import {dayOffType} from "@/utils/data_utils.ts";

const emit = defineEmits(['backClick']);

interface Props {
  selectDayData?: Object;//
  dialogModel: Boolean
}

const props = withDefaults(defineProps<Props>(), {
  dialogModel: false
});

const pageData = reactive({})

const dateValue = computed(() => {
  return `${props.selectDayData['年份']}-${props.selectDayData['月份']}`
})

const pageTitle = computed(() => {
  return `${props.selectDayData['员工姓名']} ${props.selectDayData['年份']}-${props.selectDayData['月份']} 考勤数据`
})

const getDayText = (row) => {
  // console.log("getDayText", row)
  if (['next-month', 'prev-month'].includes(row.type)) return '-'
  else return props.selectDayData[`${row.text}日`] || props.selectDayData[`${row.text}日_0`] || '-'
}

const getDayStyle = (row) => {
  let dayText = getDayText(row)
  dayText = dayText.includes('/') ? dayText.split('/')[0] : dayText
  return {background: !['出勤', '双休日', '-'].includes(dayText) ? dayOffType[dayText] : ''}
}
</script>

<style scoped>
.day-check-title-view {
  font-weight: bold;
  font-size: 17px;
}

/deep/ .el-picker-panel__body-wrapper .el-date-picker__header {
  display: none;
}

/deep/ .el-picker-panel__body-wrapper .el-date-picker__header .el-date-picker__prev-btn {
  display: none;
}

/deep/ .el-picker-panel__body-wrapper .el-date-picker__header .el-date-picker__next-btn {
  display: none;
}

/deep/ .el-date-picker .el-picker-panel__content {
  width: calc(100% - 30px);
}

.day-item-view {
  border: 1px solid #aaaaaa;
}
</style>